<template>
  <component :is="data.children ? SubMenu : AntdMenuItem" :key="data.path">
    <template v-if="data.children" #title>
      <span>{{ data.meta.title }}</span>
    </template>
    <a v-if="!data.children" href="javascript:void(0)" @click="$emit('toRoute', data.path)">
      {{ data.meta.title }}
    </a>
    <!-- <router-link v-if="!el.children" :to="el.action"> {{ el.name }} </router-link> -->
    <template #icon>
      <Icon v-if="data.meta.icon" :type="data.meta.icon" />
    </template>
    <template v-if="data.children">
      <MenuTreeNode
        v-for="subEl in data.children"
        :key="subEl.path"
        :data="subEl"
        @to-route="$emit('toRoute', $event)"
      />
    </template>
  </component>
</template>
<script setup lang="ts">
import { Menu } from "ant-design-vue";
import { RouteItem } from "/@/api/main/system/models";

defineProps<{
  data: RouteItem;
}>();

const emits = defineEmits(["toRoute"]);

const SubMenu = Menu.SubMenu;
const AntdMenuItem = Menu.Item;
</script>
